<template>
  <!-- <div class="evaluateWtapper">
    <div class="evaluateItem" v-for="(item, index) in reply" :key="index">
      <div class="pic-text acea-row row-middle">
        <div class="pictrue">
          <img :src="item.avatar" class="image" />
        </div>
        <div class="acea-row row-middle">
          <div class="name line1">{{ item.nickname }}</div>
          <div class="start" :class="'star' + item.star"></div>
        </div>
      </div>
      <div class="time">{{ item.add_time }} {{ item.suk }}</div>
      <div class="evaluate-infor">{{ item.comment }}</div>
      <div class="imgList acea-row">
        <div class="pictrue" v-for="(itemn, index) in item.pics" :key="index">
          <img :src="itemn" class="image" />
        </div>
      </div>
      <div class="reply" v-if="item.merchant_reply_content">
        <span class="font-color-red">店小二</span>：{{item.merchant_reply_content}}
      </div>
    </div>
  </div> -->
  <div>
    <div class="main acea-row" v-for="(item, index) in reply" :key="index" > 
      <div class="m-commentUser" >
        <div class="pictrue">
          <el-avatar icon="el-icon-user-solid" :size="70" :src="item.avatar"></el-avatar>
        </div>
        <div class="text">{{ item.nickname }}</div>
      </div>
      <div class="m-commentItem">
        <div class="starWarp">
          <el-rate
            v-model="item.star"
            disabled 
            >
          </el-rate>
        </div>
        <div class="skuInfo" v-if="item.suk">规格:{{ item.suk }}</div>
        <div class="comment">{{ item.comment }}</div>
        <div class="picList " >
          <div class="pic acea-row" v-for="(itemn, index) in item.pics" :key="index">
            <el-image 
              style="width: 140px; height: 140px"
              :src="itemn" 
              :preview-src-list="item.pics"
              :fit="fit">
            </el-image>
          </div>
        </div>
        <div class="createTime">{{ item.add_time }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "EvaluationGroup",
  props: {
    reply: {
      type: Array,
      default: () => []
    }
  },
  data: function() {
    return {};
  },
  mounted: function() {},
  methods: {}
};
</script>
<style scoped>
  .main {
    width: 788px;
    padding: 27px 0 30px;
    border-top: 1px dashed #dedede;
  }
  .main .m-commentUser {
    width: 70px;
    height: 80px;
  }
  .main .m-commentUser .pictrue {
    width: 70px;
    height: 70px;
  }
  .main .m-commentUser  .text {
    width: 70px;
    height: 18px;
    margin-top: 12px;
    font-size: 12px;
    text-align: center;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
    line-height: 18px;
  }
  .main .m-commentItem {
    width: 710px;
    padding-left: 20px;
  }
  .main .m-commentItem .starWarp {
    height: 24px;
  }
  .main .m-commentItem .skuInfo {
    height: 22px;
    padding-bottom: 10px;
    font-size: 12px;
    color: #999999;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    line-height: 1;
  }
  .main .m-commentItem  .comment{
    min-height: 20px;
    line-height: 20px;
    font-size: 14px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
    margin-bottom: 10px;
  }
  .main .m-commentItem  .picList {
    margin-bottom: 10px;
  }
  .main .m-commentItem  .picList  .pic {
    width: 141px;
    height: 141px;
    margin-right: 10px;
  }
  .main .m-commentItem .createTime {
    font-size: 12px;
    color: #999999;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
  }
</style>